<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//$("div").find("a").css({"color":"green"});
	$("div").children().css({"color":"blue", "text-decoration":"none"});	//text node 제외
	
	$(".desc").on("click", function(){
		$(this).next().text($(this).text());
	});
	/****************************************************************************
	id가 tb인 테이블의 tbody의 row를 클릭하면 클릭된 row의 글번호를 alert
	으로 띄운뒤 그 row의 배경색을 xxx색으로 변경
	****************************************************************************/
	$("#tb tbody tr").on("click", function(){
		$("#tb tr").css({"background-color":"white"}).filter(this).css({"background-color":"green"});
		alert($(this).find(":first").text());
	});
});
</script>
<style type="text/css">
#tb tbody td:nth-child(2){
	cursor: pointer;
}
</style>
</head>
<body>
<div id="cafe">
카페:
	<p>
		<span>커피프랜차이즈</span> 
		<a href="#">스타벅스</a>
		<a href="#">커피빈</a>
		<a href="#">커피베네</a>
		<a href="#">java카페</a>
	</p>	
</div>
<br>
<div>
	포탈 : 
	<a href="#">구글</a>
	<a href="#">다음</a>
	<a href="#">네이트</a>
	<a href="#">네이버</a>
</div>
<hr/>
<p id="descLayer">
	<span class="desc">설명 1</span><span></span><br>
	<span class="desc">설명 2</span><span></span><br>
	<span class="desc">설명 3</span><span></span><br>
	<span class="desc">설명 4</span><span></span><br>
</p>
<hr>

<table border='1' id="tb" width="350px">
	<thead>
		<tr>
			<td>no</td>
			<td>제목</td>
			<td>작성자</td>
			<td>조회수</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>1번글입니다.</td>
			<td>유재석</td>
			<td>20</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2번글입니다.</td>
			<td>박명수</td>
			<td>50</td>
		</tr>
		<tr>
			<td>3</td>
			<td>3번글입니다</td>
			<td>정준하</td>
			<td>70</td>
		</tr>
		<tr>
			<td>4</td>
			<td>4번글입니다.</td>
			<td>길</td>
			<td>30</td>
		</tr>
	</tbody>
</table>
</body>
</html>


